<template>
  <el-container>
    <el-aside width="200px">
      <CompanyMenu></CompanyMenu>
    </el-aside>
    <el-main>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"><Breadcrumb></Breadcrumb></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="margin-bottom: 10px">
          <el-input v-model="search" class="w-50 m-2" placeholder="请输入内容" prefix-icon="el-icon-search" style="width: 250px;margin-left: 900px"/>
          <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="searchProject()">搜索</el-button>
        </div></el-col>
      </el-row>
      <div>
        <el-table :data="projects" style="width: 100%" >
          <el-table-column fixed prop="name" label="项目名称" width="180" />
          <el-table-column prop="details" label="项目详情" width="180" :formatter="stateFormat" :show-overflow-tooltip="true" />
          <el-table-column prop="department.name" label="负责部门" width="180" />
          <el-table-column prop="submit" label="项目状态" width="185">

          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="185" />
          <el-table-column prop="estTime" label="预计结束" width="185" />
          <el-table-column prop="endTime" label="提交时间" width="185" />
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-popover placement="left" :width="400" trigger="click">
                  <template #reference>
                    <el-button type="text" style="margin-right: 16px" size="small" @click="handleClick(scope.row)">详情</el-button>
                  </template>
                  <TaskList ref="taskList" :taskList="taskList"></TaskList>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background @current-change="currentChange" :total="count" :current-page="pageNum" :page-size="pageSize" layout="prev, pager, next">
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import instanceToken from '@/utlis/tokenIdentify.js'
import CompanyMenu from '@/components/menu/CompanyMenu.vue'
import getCurrentDate from '@/utlis/date.js'
import TimeLine from "@/components/leader/project/TimeLine.vue";
import TaskList from "@/components/leader/project/TaskList.vue";
import Breadcrumb from "@/components/leader/department/Breadcrumb";

export default {
  components: {
    Breadcrumb,
    CompanyMenu,
    TimeLine,
    TaskList
  },
  data() {
    return {
      projects:[],
      taskList:[],

      pageSize:6,
      pageNum:1,
      count:0,

      companyUserId:'',
      visibletest:false,
      search:''
    }
  },
  created: function () {
    this.findAll();
  },
  methods: {
    stateFormat(row, column, cellValue){
      if (!cellValue) return "";
      if (cellValue.length > 200) {
        return cellValue.slice(0, 200) + "...";
      }
      return cellValue;
    },
    findAll(){
      instanceToken.get("project/leader/projectFindAll",{params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
        }}).then(res =>{
        let length = res.data.data.list.length;
        // for(let i=0;i<=length;i++){
        //   if (res.data.data.list[i].endTime === '') {
        //     res.data.data.list[i].endTime = '此项目还没有人提交哦';
        //     this.count = res.data.data.total;
        //     this.projects = res.data.data.list;
        //   }else {
        //     this.count = res.data.data.total;
        //     this.projects = res.data.data.list;
        //   }
        // }
        let date = getCurrentDate();
        for (let i = 0;i<length;i++){
          let submit = res.data.data.list[i].submit;
          let startTime = res.data.data.list[i].startTime;
          let estTime = res.data.data.list[i].estTime;
          let endTime = res.data.data.list[i].endTime;
          if (submit==false){
            if (date<startTime && endTime==null){
              res.data.data.list[i].submit = '未开始';
              this.projects = res.data.data.list;
              continue;
            }
            else if(startTime==estTime){
              res.data.data.list[i].submit = '进行中';
              this.projects = res.data.data.list;
              continue;
            }
            else if (date>=startTime && date<=estTime){
              res.data.data.list[i].submit = '进行中';
              this.projects = res.data.data.list;
              continue;
            }
            else if(date>estTime && date>startTime){
              res.data.data.list[i].submit = '已延期';
              this.projects = res.data.data.list;
              continue;
            }
          }
          else {
            res.data.data.list[i].submit = '已完成';
            this.projects = res.data.data.list;
            continue;
          }
        }
      })
    },
    currentChange(val){
      this.pageNum = val;
      this.findAll();
    },
    handleClick(row){
      let id = row.id;
      instanceToken.get("project/leader/taskList/"+id).then(res =>{
        this.taskList = res.data.data;
        console.log(this.taskList)
      })
    },
    check(val,row){
      console.log(row)
      this.$refs.TimeLineProject.initdata(row);
      this.visibletest = !this.visibletest;
    },
    searchProject(){
      instanceToken.get("project/leader/search",{
        params:{
          searchContent:this.search,
        }}).then(res =>{
        this.projects = res.data.data;
      })
    }
  }
}
</script>

<style>
* {
  margin: 0%;
  padding: 0%;
}

.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #ffffff;
  text-align: center;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
